import {PageContainer, ProTable} from "@ant-design/pro-components";
import React, {useRef, useState} from "react";
import {Col, Row, Tag, Calendar, CalendarProps, theme, Divider, Carousel} from "antd";
import {listQuestionByPage, listQuestionForUserByPage} from "@/services/ant-design-pro/questionController";
import {ProFormInstance} from "@ant-design/pro-form/lib";
import {Link} from "@umijs/max";
import {Dayjs} from "dayjs";
import {CheckCircleTwoTone, CloseCircleTwoTone, MinusCircleTwoTone} from "@ant-design/icons";

enum QuestionLevel {
  SIMPLE = 0 ,
  MEDIUM = 1 ,
  HARD = 2  ,
}

const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
  console.log(value.format('YYYY-MM-DD'), mode);
};

const contentStyle: React.CSSProperties = {
  margin: 0,
  height: '320px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
export default ()=>{

  const formQuestionRef = useRef<ProFormInstance>()
  const actionQuestionRef = useRef()
  const [pageRequest, setPageRequest] = useState<PageRequest>({
    current:1,
    pageSize:10
  });

  const { token } = theme.useToken();

  const columns = [
    {
      title: '状态',
      width: 80,
      dataIndex: 'status',
      valueType: 'textarea',
      render(text: string, record: API.QuestionEntityVO) {
        if (record?.status === 0) {
          return <CheckCircleTwoTone />;
        }
        if (record?.status === 1){
          return <MinusCircleTwoTone />;
        }
      },
    },
    {
      title: '题目',
      dataIndex: 'title',
      valueType: 'textarea',
      ellipsis: true,
      render: (text: string, record: API.QuestionEntity) => {
        return (
          <Link
            to={{
              pathname: `/oj/do/${record?.id}`,
            }}
          >
            {text}
          </Link>
        );
      },
    },
    {
      title: '题解',
      width: 100,
      dataIndex: 'answerCount',
      valueType: 'textarea',
    },
    {
      title: '通过率',
      width: 80,
      dataIndex: 'passRate',
      hideInSearch: true,
      valueType: 'textarea',
      render(text: string, record: API.QuestionEntityVO): JSX.Element {
        return <span>{(record?.passRate || 0) * 100 + "%"}</span>
      },
    },
    {
      title: '难度',
      width: 80,
      dataIndex: 'level',
      valueType: 'textarea',
      tip: '标题过长会自动收缩',
      render: (text: any, record: API.QuestionEntity) => {
        if (record?.level === QuestionLevel.SIMPLE) {
          return <Tag color="success">简单</Tag>;
        }
        if (record?.level === QuestionLevel.MEDIUM) {
          return <Tag color="orange">中等</Tag>;
        }
        if (record?.level === QuestionLevel.HARD) {
          return <Tag color="error">困难</Tag>;
        }
      },
    },
  ];

  const queryQuestionByPager = async (param:PageRequest) => {

    // 第一个参数 params 查询表单和 params 参数的结合
    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
    const searchParam = formQuestionRef?.current?.getFieldsValue();
    const res = await listQuestionForUserByPage({
      ...param,
      ...searchParam
    })

    return {
      data: res?.data?.records,
      // success 请返回 true，
      // 不然 table 会停止解析数据，即使有数据
      success: res?.code === 200,
      // 不传会使用 data 的长度，如果是分页一定要传
      total: res?.data?.total,
    };
  }

  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  };

  return (
    <>
      <PageContainer
        title={false}
        breadcrumbRender={false}
      >
        <Row>
          <Col span={18}>
            <Carousel afterChange={onChange}>
              <div>
                <h3 style={contentStyle}>1</h3>
              </div>
              <div>
                <h3 style={contentStyle}>2</h3>
              </div>
              <div>
                <h3 style={contentStyle}>3</h3>
              </div>
              <div>
                <h3 style={contentStyle}>4</h3>
              </div>
            </Carousel>
          </Col>
          <Col span={6}>
            <Calendar fullscreen={false} onPanelChange={onPanelChange} />
          </Col>
        </Row>
        <Divider/>

        <ProTable<API.QuestionEntity, any>
          // params 是需要自带的参数
          // 这个参数优先级更高，会覆盖查询表单的参数
          headerTitle={false}
          toolbar={{
            settings:undefined
          }}
          formRef={formQuestionRef}
          actionRef={actionQuestionRef}
          params={{}}
          columns={columns as any}
          pagination={pageRequest}
          rowKey="id"
          search={{
            labelWidth: 100,
            span: 6,
          }}
          request={(params) => queryQuestionByPager(params)}
        />
      </PageContainer>
    </>
  );


}
